<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElTabs, ElTabPane } from "element-plus"

//组件
import Limit from '@/views/content/util/limit.vue'
import Header from '@/views/content/util/header.vue'
import TableEntityManage from "@/views/content/components/inStore/tableEntityManage.vue"
import TableTypeManage from "@/views/content/components/inStore/tableTypeManage.vue"


const activeName = ref('tableManage')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}


</script>


<template>
    <div>
        <Header title="桌码管理"></Header>
        <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
        <el-tab-pane label="桌位管理" name="tableManage">
            <TableEntityManage></TableEntityManage>
        </el-tab-pane>

        <el-tab-pane label="桌位类型" name="tableType">
            <TableTypeManage></TableTypeManage>
        </el-tab-pane>
    </el-tabs>
    </div>
</template>



<style lang="scss" scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
 
// ::v-deep .el-tabs__item {
//     color: green;
//     opacity: 0.5;
// }
 
/**选中 */
::v-deep .el-tabs__item.is-active {
    color: red;
    opacity: 1;
}
 
/**悬浮 */
::v-deep .el-tabs__item:hover {
    color: red;
    cursor: pointer;
    opacity: 1;
}
 
 
/*去下划线 */
::v-deep .el-tabs__nav-wrap::after {
    position: static !important;
}
 
/* 下划线颜色 */
::v-deep .el-tabs__active-bar {
    background-color: red;
}

</style>